<template>
  <el-dialog
    title="新增用户"
    :visible.sync="visible"
    width="48%"
    :close-on-click-modal="false"
    top="2vh"
    :show-close="false"
    center
  >
    <el-form :model="inputUser" label-width="80px" :inline="true" ref="ruleForm" :rules="rules">
      <el-form-item label="用户名" prop="userLoginName">
        <el-input v-model="inputUser.userLoginName" class="input_width"></el-input>
      </el-form-item>
      <el-form-item label="姓 名" prop="userName">
        <el-input v-model="inputUser.userName" class="input_width"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="userPassword">
        <el-input
          type="password"
          show-password
          v-model="inputUser.userPassword"
          class="input_width"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input type="password" show-password v-model="inputUser.checkPass" class="input_width"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="userSex">
        <label slot="label">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</label>
        <el-radio-group v-model="inputUser.userSex">
          <el-radio style="margin-left:10px" label="男" border>&nbsp;&nbsp; 男 &nbsp;&nbsp;</el-radio>
          <el-radio label="女" border>&nbsp;&nbsp;女 &nbsp;&nbsp;</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="联系电话" prop="userPhone">
        <el-input v-model="inputUser.userPhone" class="input_width"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="userEmail">
        <el-input v-model="inputUser.userEmail" class="input_width"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="userStatus">
        <el-radio-group v-model="inputUser.userStatus">
          <el-radio label="有效" border>有效</el-radio>
          <el-radio label="无效" border>无效</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancle()">取 消</el-button>
      <el-button type="primary" @click="addForm('ruleForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { Message } from "element-ui";
import aes from "../../../../utils/aes";
export default {
  components: {},
  props: ["msg"],
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.inputUser.userPassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    var validateName = (rule, value, callback) => {
      this.$http
        .get("/user/selectByuserName", { params: { userLoginName: value } })
        .then((res) => {
          if (res.data > 0) {
            callback(new Error("用户名已存在"));
          } else {
            callback();
          }
        });
    };
    var validatePhone = (rule, value, callback) => {
      this.$http
        .get("/user/selectByPhone", { params: { userPhone: value } })
        .then((res) => {
          if (!/^1[3456789]\d{9}$/.test(value)) {
            callback(new Error("请输入正确的手机号"));
          } else if (res.data > 0) {
            callback(new Error("该手机号已被注册"));
          } else {
            callback();
          }
        });
    };
    var validateMail = (rule, value, callback) => {
      if (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(value)) {
        callback(new Error("请输入正确的邮箱"));
      } else {
        callback();
      }
    };
    var validateStatus=(rule, value, callback)=>{
      if(value==''){
        callback(new Error("状态必填"))
      }else{
        callback()
      }
    };
    var validateSex=(rule, value, callback)=>{
      if(value==''){
        callback(new Error("性别必填"))
      }else{
        callback()
      }
    };

    return {
      inputUser: {
        userLoginName: "",
        userName: "",
        userPassword: "",
        userSex: 0,
        userPhone: "",
        userEmail: "",
        userStatus: 0,
        checkPass: "",
      },
      rules: {
        checkPass: [{ validator: validatePass2, required: true }],
        userLoginName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 10 个字符" },
          { validator: validateName },
        ],
        userName: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 10, message: "长度在 2 到 10 个字符" },
        ],
        userPassword: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 20, message: "密码长度在6到20位之间" },
        ],
        userSex: [{ required: true, validator: validateSex }],
        userPhone: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          { validator: validatePhone },
        ],
        userStatus: [ { required: true, validator: validateStatus},],
          
        
        userEmail: [
          { required: true, message: "请选择邮箱", trigger: "blur" },
          { validator: validateMail },
        ],
      },
      visible: true,
    };
  },
  methods: {
    cancle() {
      console.log("hideModel");
      this.$emit("hideModel", false);
    },
    addForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const param = new URLSearchParams();
          param.append("userLoginName", this.inputUser.userLoginName);
          param.append("userName", this.inputUser.userName);
          const encryptPassword = aes.Encrypt(this.inputUser.userPassword);
          param.append("userPassword", encryptPassword);
          param.append("userSex", this.inputUser.userSex == "男" ? 1 : 0);
          param.append("userPhone", this.inputUser.userPhone);
          param.append("userEmail", this.inputUser.userEmail);
          param.append(
            "userStatus",
            this.inputUser.userStatus == "有效" ? 1 : 0
          );
          var that = this;
          that
            .$http({
              method: "post",
              url: "/user/insertUser",
              data: param,
            })
            .then((res) => {
              that.$emit("flag", false);
              if (res.data == 1) {
                Message({ message: "添加成功", type: "success" });
              } else {
                Message({ message: "添加失败", type: "error" });
              }
            });
          this.$emit("hideModel", false);
          this.$emit("refreshList");
        } else {
          Message({ message: "添加失败，你输入的格式错误", type: "error" });
        }
      });
    },
  },
};
</script>
<style lang='less' scoped>
.input_width {
  width: 200px;
}
.el-input {
  margin-top: 10px;
}
.el-form-item__label {
  margin-left: 10px;
}
</style>